<template>
  <!-- 头部导航 -->
  <div id="topbg">
    <div id="top">
      <div id="logo">
        <img height="37" src="@/assets/images/logo.jpg" width="320" alt="FIL环泽科技" />
        <span>深圳市环泽科技有限公司</span>
      </div>
      <div id="menu">
        <ul>
          <li>
            <div :class="{item: true, sel: firstNavId == null}" @click="navClick(null, '/')">首页</div>
          </li>
          <li v-for="item in navList" :key="item.id">
            <div 
              :class="{item: true, sel: firstNavId == item.id}" 
              @click="navClick(item.id, item.path)"
            >
              {{ item.name }}
            </div>
          </li>
        </ul>
        <div class="clear"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    // 点击导航项
    navClick(id, path) {
      // 如果点击当前已选中导航则不处理
      if (id === this.firstNavId && this.$route.path === path) return
      
      // 执行路由跳转
      if (this.$route.path !== path) {
        this.$router.push(path)
      }
    }
  }
}
</script>

<style scoped>
.clear {
  clear: both;
}

#topbg {
  background: #F6FAFD;
  border-bottom: none;
  width: 100%;
  height: 87px;
}

#top {
  width: 1000px;
  height: 87px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#logo {
  float: left;
  display: flex;
  align-items: center;
  position: relative;
}
#logo span {
  position: relative;
  margin-left: -52px;
  font-size: 24px;
  color: #365897;
}

#logo img {
  display: block;
  margin-left: -44px;
}
  
#menu {
   float: right;
}
   
#menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#menu li {
  float: left;
  margin-left: 2px;
}

#menu a,
#menu .item {
  text-decoration: none;
  font-size: 14px;
  font-weight: normal;
  height: 24px;
  padding: 0 14px;
  line-height: 24px;
  display: block;
  font-weight: bold;
  cursor: pointer;
}

#menu a.sel,
#menu a:hover,
#menu .item.sel,
#menu .item:hover {
  background: #365897;
  border-radius: 25px;
  -moz-border-radius: 25px;
  color: #fff;
}
</style>